<template>
  <div class="village">
    <div class="link" @click="init">详情 ({{item.standard_number}})</div>
    <el-dialog title="细则列表" width="1200px" :visible.sync="show" class="dialog-list">
      <div class="list">
        <el-table ref="selects" :data="list" @selection-change="change" v-loading="loading">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="标题" prop="title"></el-table-column>
          <el-table-column label="分数" prop="score">
            <template slot-scope="scope">
              <span class="f-w-b f40">{{scope.row.score}}</span>
            </template>
          </el-table-column>
          <el-table-column label="内容">
            <template slot-scope="scope">
              <el-popover placement="top" width="400" trigger="hover" :content="scope.row.content">
                <span slot="reference" class="link">
                  <i class="fa fa-tags mr-5"></i>详情
                </span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="添加时间" prop="addtime"></el-table-column>
          <el-table-column label="操作" width="170">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="scope.row.street_id = parseInt(scope.row.street_id);form.list = {...scope.row};form.show=true;"
              >编辑</el-button>
              <el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="footer after">
          <div class="left">
            <el-button @click="checkAll" size="small">全选</el-button>
            <el-button @click="del(checkList)" size="small" type="danger">删除选中项</el-button>
            <el-button @click="form.show=true" size="small" type="primary">添加细则</el-button>
          </div>
          <div class="right">
            <el-pagination
              layout="total,prev, pager, next"
              :total="page.count"
              :page-size="page.size"
              @current-change="pageChange"
              :current-page="page.current"
            ></el-pagination>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="操作" width="600px" :visible.sync="form.show" @closed="down">
      <el-form :model="form.list" :rules="form.rules" ref="form.list" size="small">
        <el-form-item label="标题 : " label-width="100px" prop="title">
          <el-input v-model="form.list.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容 : " label-width="100px" prop="content">
          <el-input v-model="form.list.content" autocomplete="off" type="textarea"></el-input>
        </el-form-item>

        <el-form-item label="问题列表 : " label-width="100px" prop="issue">
          <el-input v-model="form.list.issue" autocomplete="off" placeholder="请输入问题"></el-input>
        </el-form-item>
        <el-form-item label="注 : " label-width="100px">
          <div class="note">问题以英文逗号分隔,如 : 垃圾乱扔,垃圾乱放</div>
        </el-form-item>

        <el-form-item label="分数 : " label-width="100px" prop="score">
          <el-input-number
            v-model="form.list.score"
            controls-position="right"
            :min="0"
            @change="handleChange"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submit()" size="small" :disabled="form.state">提 交</el-button>
        <el-button @click="form.show=false" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      show: false,
      form: {
        show: false,
        list: {
          title: "",
          content: "",
          year_period_id: "",
          issue: "",
          score: 0
        },
        // 表单验证
        rules: {
          title: [{ required: true, message: "请输入标题", trigger: "blur" }],
          content: [{ required: true, message: "请输入内容", trigger: "blur" }],
          issue: [{ required: true, message: "请输入问题", trigger: "blur" }],
          score: [{ required: true, message: "请输入分数", trigger: "blur" }]
        },
        // 表单提交状态
        state: false
      },
      // 空列表 存储已经选中的选项
      checkList: [],
      // 页码(默认条数,页数,总数量)
      page: {
        size: 10,
        current: 1,
        count: 0
      },
      // 加载
      loading: false
    };
  },
  props: ["item"],
  methods: {
    // 初始化
    init() {
      this.show = true;
      this.form.list.year_period_id = this.item.id;
      this.searchHandle();
    },
    // 提交
    submit() {
      this.$refs["form.list"].validate(valid => {
        if (valid) {
          var form = this.form;
          form.state = true;
          var data = { ...form.list };
          data["T"] = "standard";
          this.axios.post("/admin/Index/handle", data).then(ref => {
            var ref = ref.data;
            if (ref.state) {
              this.common.message({ message: ref.info });
              // 关闭弹窗
              form.show = false;
              // 重新搜索
              this.searchHandle();
            } else {
              this.common.message({ message: ref.info, type: "error" });
            }
            // 关闭提交锁定
            form.state = false;
          });
        }
      });
    },
    // 搜索
    searchHandle() {
      // 开启加载
      this.loading = true;
      var data = {
        year_period_id: this.item.id,
        // 页码
        page: {
          current: this.page.current,
          size: this.page.size
        }
      };
      this.axios.post("/admin/Index/search_standard", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          this.list = ref.other.data;
          this.page.count = ref.other.count;
        } else {
          this.common.message({ message: ref.info, type: "error" });
        }
        // 开启加载
        this.loading = false;
      });
    },
    // 删除
    del(row) {
      // 选中项为空时
      if (row.length == 0) {
        this.common.message({
          message: "删除失败,请选择删除项",
          type: "warning"
        });
        return false;
      }
      this.common.confirm().then(() => {
        var data = { T: "standard", id: [] };
        row = row.length ? row : [row];
        for (var i in row) {
          data.id.push(row[i]["id"]);
        }
        var url = "/admin/Index/del";
        // 请求发送
        this.axios.post(url, data).then(ref => {
          var ref = ref.data;
          if (ref.state) {
            // 计算总页数
            var n = Math.ceil((this.page.count - row.length) / this.page.size);
            // 更新页码
            if (n && n < this.page.current) this.page.current--;
            // 重新搜索
            this.searchHandle();
            this.common.message({ message: ref.info });
          } else {
            this.common.message({ message: ref.info, type: "error" });
          }
        });
      });
    },
    // 清空
    down() {
      this.form.list = {
        title: "",
        content: "",
        issue: "",
        year_period_id: this.form.list.year_period_id,
        score: 0
      };
      this.$refs["form.list"].resetFields();
    },
    // 当选择框出现改变时
    change(selection) {
      this.checkList = selection;
    },
    // 选中全部
    checkAll() {
      this.list.forEach(row => {
        this.$refs.selects.toggleAllSelection(row);
      });
    },
    // 页码改变
    pageChange(val) {
      this.page.current = val;
      this.searchHandle();
    }
  }
};
</script>
<style scoped>
.village .dialog-list >>> .el-dialog__body {
  padding: 0 !important;
}
.village .dialog-list .list .footer {
  padding: 15px;
}
</style>